<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列课程</title>
</head>
<body>
<div id="app">
    <h1>Axios的基本使用</h1>

</div>
</body>
</html>
<script src="js/axios.min.js"></script>
<script>

    //发送axios的get方式请求
    // axios.get("http://localhost:8081/demo?id=21&name=xiaochen").then(function(res){
    //     console.log(res);
    //     console.log(res.data);
    // }).catch(function (err) {
    //     alert('进入catch');
    //     console.log(err);
    // });

    //发送一个post方式请求
    // axios.post("http://localhost:8081/test",{id:21,name:"xiaochen"}).then(function(res){
    //     console.log(res);
    //     console.log(res.data);//响应结果
    // }).catch(function(err){
    //     console.log(err);
    // });

    //发送put方式请求
    // axios.put("http://localhost:8081/test1",{id:22,name:"小三"}).then(function(res){
    //     console.log(res);
    //     console.log(res.data);//响应结果
    // }).catch(function(err){
    //     console.log(err);
    // });

    //创建axios的配置对象，用来放一些公共配置信息
    var instance = axios.create({
        baseURL:"http://localhost:8081/",//抽取公共的url，避免后面一处修改，到处修改的痛苦，也为了减少重复代码
        timeout: 5000 //可以接受的等待时间为5秒，如果5秒内拿不到结果就不等了
    });

    //请求拦截器, 将所有请求都要带上的token信息抽取出来放到公用的拦截器中，减少代码冗余
    instance.interceptors.request.use(function (config) {
        console.log(config);
        if(config.url.indexOf("?")==-1){
            config.url+="?token=1234"
        }else{
            config.url +="&token=1234";
        }
        return config;
    });

    //响应拦截器，一般用来处理异常
    instance.interceptors.response.use(function (response) {
        // console.log(response);
        // response.data = 'xxx';//修改响应数据
        // console.log(response.data);
        if(response.status != 200){
            alert('服务器出现错误!');
        }
        return response;
    });


    //发送get方式请求
    instance.get("/demo?id=11&name=lzm").then(function (res) {
        console.log(res.data);
    });

    instance.post("http://localhost:8081/test", {id: 21, name: "lzm"}).then(function (res) {
        console.log(res.data);
    });

</script>
